<template >
  <div class="all">
    <Dialog/>
    <!-- 顶部 -->
    <div v-if="!ImgShow2">
            <van-nav-bar title="法律知识对战" left-text="" left-arrow  @click-left="test">
                <template #right @click-left="test">
                <van-icon name="setting-o" size="18" @click="RightSet" />
                </template>
            </van-nav-bar>
    <!-- 用户信息 -->
    <div class="user">
        <p>
          <img src="/img/Yang/touxiang.png" alt="" />
        </p>
        <p>
          <b>176****6914</b>
          <span>1</span>
          <span>2/20</span>
        </p>
      </div>

      <!-- 菜单 -->
      <div class="main">
        <div class="big">1V1对战</div>
        <div class="big">3V3对战</div>
        <div class="big">福利大厅</div>
        <div class="big">
          <p>排行榜</p>
          <p>背包</p>
        </div>
      </div>
    </div>

    <!--设置-->
    <div>
      <van-overlay :show="IsShow">
        <div class="wrapper" @click="IsShow = false">
          <div class="blocks">
            <h3>背景音乐</h3>
            <button>关闭</button>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import Dialog from "./Dialog.vue";
import { mapState } from "vuex";
export default {
    data() {
        return {
            IsShow:false
        }
    },
  methods: {
    RightSet(){
        this.IsShow=true;
    },
    test(){
        console.log(111);
        window.history.go(-1)
    }
  },
  components: {
    Dialog,
  },
  //计算属性
  computed: {
    ...mapState("yang", ["ImgShow2"]),
  },
};
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0; 
}
.all{
    width: 100%;
    height: 100%;
    background: #CECECE;
}
.van-nav-bar {
    background: #CECECE;
    height: 0.8rem;
}
.van-nav-bar.van-icon{
    color: #333333;
}
.user {
  width: 6rem;
  height: 1.5rem;
  background: #f0f0f0;
  border-radius: 0.2rem;
  padding: 0.2rem;
  box-sizing: border-box;
  margin: auto;
  margin-top: 1.3rem;
  position: relative;
  p {
    &:nth-child(1) {
      width: 1.1rem;
      height: 1.1rem;
      overflow: hidden;
      border-radius: 0.3rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &:nth-child(2) {
      position: absolute;
      top: 0.35rem;
      left: 1.65rem;
      span {
        display: block;
        margin-top: 0.1rem;
        background: #ffffff;
        &:nth-child(2) {
          width: 0.5rem;
          height: 0.5rem;
          text-align: center;
          border-radius: 0.1rem;
          line-height: 0.5rem;
        }
        &:nth-child(3) {
          width: 3.5rem;
          position: absolute;
          top: 0.45rem;
          left: 0.35rem;
          text-align: center;
        }
      }
    }
  }
}
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 0.8rem;
  .big {
    width: 3rem;
    height: 3rem;
    background: white;
    margin: 0.3rem;
    text-align: center;
    line-height: 3rem;
    &:nth-last-child(1) {
      background: none;
    }
    p {
      background: white;
      line-height: 1.25rem;
      height: 40%;
      margin-bottom: 0.6rem;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.blocks {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  text-align: center;
  box-sizing: border-box;
  padding-top: 0.8rem;
  button {
    width: 1.8rem;
    height: 0.6rem;
    border: none;
    border-radius: 0.2rem;
    margin-top: 0.4rem;
  }
}
</style>